<template>
  <div>
    <div class="picture_box">
      <div class="enterprise_name">
        <div class="enterprise_name_title">企业名称</div>
        <div class="enterprise_name_text">{{ this.d2CorpName }}</div>
      </div>
      <div class="pk_img">
        <img src="~img/lookAround/pk.png" alt="" />
      </div>
      <div class="Industry">
        <div class="Industry_title">所在行业</div>
        <div class="Industry_text">{{ this.d2Industryco }}</div>
      </div>
    </div>
    <div class="industry_trends">请选择目标行业趋势</div>
    <div class="seleck_box">
      <div
        class="seleck_div"
        :class="item.selected ? 'seleck_div2' : ''"
        v-for="(item, index) in searchList.content"
        :key="index"
        @click="labelClick(item)"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="begin_btn" @click="begin">
      <div>开始</div>
      <div class="pk">PK</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],

  /* 2. Vue数据 */
  props: {},
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {
      // labelBox: [
      //   { name: "负债率", selected: false },
      //   { name: "纳税", selected: false },
      //   { name: "营收", selected: false },
      //   { name: "新设企业", selected: false },
      //   { name: "新设企业", selected: false },
      //   { name: "用工", selected: false },
      //   { name: "专利", selected: false },
      //   { name: "平均生命周期", selected: false },
      //   { name: "贷款余额", selected: false },
      //   { name: "净利润", selected: false },
      //   { name: "涉案", selected: false },
      //   { name: "不良贷款", selected: false },
      //   { name: "聚焦区域", selected: false },
      // ],
      keyList: [],
      searchList: {
        label: "",
        key: "hy",
        showLabel: "纳税",
        content: [
          {
            label: "纳税",
            key: "tax",
            selected: true,
          },
          {
            label: "营收",
            key: "revenue",
            selected: false,
          },
          {
            label: "用工",
            key: "person",
            selected: false,
          },
          {
            label: "专利",
            key: "patent",
            selected: false,
          },
          {
            label: "用电",
            key: "electric",
            selected: false,
          },
          {
            label: "净利润",
            key: "netProfits",
            selected: false,
          },
          {
            label: "负债率",
            key: "debt",
            selected: false,
          },
          {
            label: "涉案",
            key: "case",
            selected: false,
          },
          {
            label: "不良贷款",
            key: "badLoan",
            selected: false,
          },
          {
            label: "贷款余额",
            key: "loan",
            selected: false,
          },
        ],
      },
      corpKey: "",
      d2CorpName: "",
      d2Industryco: "",
    };
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {},
  mounted() {
    this.corpKey = this.$route.query.corpKey;
    this.d2CorpName = this.$route.query.d2CorpName;
    this.d2Industryco = this.$route.query.d2Industryco;
    console.log(this.corpKey, this.d2CorpName, this.d2Industryco);
  },
  destroy() {},
  /* 5. Vue方法 */
  methods: {
    labelClick(item) {
      item.selected = !item.selected;
    },
    begin() {
      let contentList = this.searchList.content;
      let trueList = [];
      for (let i in contentList) {
        if (contentList[i].selected) {
          trueList.push(contentList[i].key);
        }
      }
      let list = JSON.stringify(trueList);
      console.log(list, trueList);
      if (trueList.length <= 0) {
        this.$toast("至少选择一项");
      } else {
        this.$router.push({
          path: "/beginPk",
          query: {
            corpKey: this.corpKey,
            d2CorpName: this.d2CorpName,
            d2Industryco: this.d2Industryco,
            list: list,
          },
        });
      }
    },
  }, // all the methods should be put here in the last
};
</script>
<style scoped lang="scss">
.enterprise_name {
  width: 300px;
  min-height: 100px;
  margin: auto;
  // background-image: url("~img/lookAround/enterprise_name_back.svg");
  background-color: #F7FBFF;
  border: 2px solid #E3F2FF;
   border-radius: 5px;
  // padding-bottom: 25px;
  padding: 0 20px 30px 20px;
  background-repeat: no-repeat;
  // background-color: pink;
  background-size: 100% 100%;
  overflow: hidden;
}
.pk_img {
  margin-top: -20px;
  text-align: center;
  width: 85px;
  height: 85px;
  margin: auto;
  background-color: white;
  border-radius: 50%;
  z-index: 99;
  position: relative;
  margin-top: -28px;

  img {
    width: 65px;
    margin-top: 10px;
  }
}
.Industry {
  width: 300px;
  height: 100px;
  margin: auto;
  margin-top: -28px;
  overflow: hidden;
  // background-image: url("~img/lookAround/Industry_back.svg");
  border: 2px solid #FFF1E4;
  background-color: #FFF8F1;
  border-radius: 5px;
  background-size: 100% 100%;
  padding: 0 20px 10px 20px;
}
.enterprise_name_title {
  text-align: center;
  color: #3282e4;
  font-weight: 550;
  margin-top: 15px;
}
.enterprise_name_text {
  text-align: center;
  margin-top: 5px;
  font-family: "PuHuiTi65";
}
.Industry_title {
  text-align: center;
  color: #eb8a2a;
  font-weight: 550;
  margin-top: 40px;
}
.Industry_text {
  text-align: center;
  // margin-top: 5px;
  font-family: "PuHuiTi65";
}
.picture_box {
  margin-top: 30px;
}
.industry_trends {
  //   background-color: pink;
  width: 100%;
  height: 45px;
  margin-top: 20px;
  line-height: 45px;
  text-align: center;
  background-image: url("~img/lookAround/gray_back.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: "PuHuiTi65";
  font-size: 14px;
  //   background-position-x: 10%;
}
.seleck_box {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  flex-wrap: wrap;
}
.seleck_div {
  margin-top: 10px;
  // margin-left: 10px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  width: 31%;
  border-radius: 5px;
  border: 1px solid #ececec;
  font-size: 14px;
  font-family: "PuHuiTi65";
}
.seleck_div2 {
  background-image: url("~img/lookAround/select_back.png");
  background-size: 100%100%;
  border: 0;
}
.begin_btn {
  width: 90%;
  margin: auto;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin-top: 20px;
  color: white;
  background-color: #3282e4;
  border-radius: 5px;
  display: flex;
  font-size: 15px;
  justify-content: center;
}
.pk {
  font-size: 18px;
  font-family: YouSheBiaoTiHei;
  font-weight: bold;
  // font-style: italic;
  margin-left: 5px;
  line-height: 38px;
}
</style>
